<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="50%"
    append-to-body
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <el-row :gutter="20">
      <el-col>
        <div class="clock-margin"><el-tag>上课打卡时间</el-tag></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12"
        ><div class="">
          <el-input
            type="number"
            v-model="modelForm.studyTimeAdvance"
            placeholder="请输入数字"
          >
            <template slot="prepend">提前</template>
            <template slot="append">单位/分钟</template>
          </el-input>
        </div></el-col
      >
      <el-col :span="12"
        ><div class="">
          <el-input
            type="number"
            v-model="modelForm.studyTimeStop"
            placeholder="请输入数字"
          >
            <template slot="prepend">截至</template>
            <template slot="append">单位/分钟</template>
          </el-input>
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col>
        <div class="clock-margin"><el-tag>下课打卡时间</el-tag></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12"
        ><div class="">
          <el-input
            type="number"
            v-model="modelForm.quittingTimeAdvance"
            placeholder="请输入数字"
          >
            <template slot="prepend">提前</template>
            <template slot="append">单位/分钟</template>
          </el-input>
        </div></el-col
      >
      <el-col :span="12"
        ><div class="">
          <el-input
            type="number"
            v-model="modelForm.quittingTimeStop"
            placeholder="请输入数字"
          >
            <template slot="prepend">截至</template>
            <template slot="append">单位/分钟</template>
          </el-input>
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col>
        <div class="clock-margin"><el-tag>二维码设置</el-tag></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12"
        ><div class="">
          <el-input
            type="number"
            v-model="modelForm.refreshNum"
            placeholder="请输入数字"
          >
            <template slot="prepend">刷新时间</template>
            <template slot="append">单位/秒</template>
          </el-input>
        </div></el-col
      >
      <el-col :span="12"><div class=""></div></el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createQrcode, getQrcodeSetting ,updateQrcode} from "@/api/study/classTimetable";
export default {
  props: {
    // 是否显示弹出层
    show: {
      type: Boolean,
      default: false,
    },
    // 显示弹出层标题
    title: {
      type: String,
      default: "打卡设置",
    },
  },
  data() {
    return {
      modelForm: {
        refreshNum: "",
        studyTimeAdvance: "",
        studyTimeStop: "",
        quittingTimeAdvance: "",
        quittingTimeStop: "",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getQrcodeSetting().then((res) => {
        if (res.code == 0) {
          this.modelForm = Object.assign({}, res.data);
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$emit("update:show", false);
    },
    // 确定
    submitForm() {
      let method = this.modelForm.id != void 0 ? updateQrcode : createQrcode;
      method(this.modelForm).then((res) => {
        if (res.code == 0) {
          this.$message.success("保存成功");
          this.cancel();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.clock-margin {
  margin: 15px 0;
}
</style>
